<template>
  <div class="data">
    <!-- <div class="title">订单查询</div> -->
    <div class="container">
      <div class="container-title">商品信息</div>
      <div class="add">扫码添加</div>
      <div>
        <div class="contents">
          <div class="item" v-for="(item, index) of content" :key="index">
            <span>{{ item.title + "：" }}</span>
            <input
              :style="{ width: item.long, textAlign: textAlign }"
              :type="item.type"
              v-model="item.value"
            />
          </div>
        </div>
      </div>
      <button class="but" @click="addpro">提交</button>
    </div>
  </div>
</template>

<script>
import { createGoods } from "@/api/data";

export default {
  name: "Addpro",
  data() {
    return {
      textAlign: "center",
      content: [
        {
          title: "所属类别",
          value: "",
          long: "",
          type: "text",
        },
        {
          title: "商品编号",
          value: "",
          long: "",
          type: "text",
        },
        {
          title: "商品条码",
          value: "",
          long: "",
          type: "text",
        },
        {
          title: "商品名称",
          value: "",
          long: "",
          type: "text",
        },
        {
          title: "作者",
          value: "",
          long: "",
          type: "text",
        },
        {
          title: "出版商",
          value: "",
          long: "",
          type: "text",
        },
        {
          title: "图书定价",
          value: 0,
          long: "",
          type: "number",
        },
        {
          title: "数量",
          value: 0,
          long: "",
          type: "number",
        },
        {
          title: "备注",
          value: "",
          long: "500px",
          type: "text",
        },
      ],
      values: {
        category: "",
        code: "",
        name: "",
        writer: "",
        press: "",
        price: 0,
        total: 0,
        remarks: "",
      },
    };
  },
  methods: {
    addpro() {
      this.values.category = this.content[0].value;
      this.values.code = this.content[2].value;
      this.values.name = this.content[3].value;
      this.values.writer = this.content[4].value;
      this.values.press = this.content[5].value;
      this.values.price = Number(this.content[6].value);
      this.values.total = Number(this.content[7].value);
      this.values.remarks = this.content[8].value;
      //表格的值
      // console.log(this.values);
      //调用
      createGoods(this.values).then((data) => {
        if (data) {
          console.log(data);
          alert("添加成功！");
        }
      });
    },
  },
};
</script>

<style>
.title {
  font-weight: bold;
  font-size: 20px;
}
.container {
  width: 978px;
  height: 783px;
  background-color: rgba(188, 179, 179, 0.10714285714285708);
}

.container-title {
  padding: 28px 0 0 64px;
  font-size: 14px;
  font-weight: bold;
}

.add {
  width: 108px;
  height: 39px;
  text-align: center;
  line-height: 39px;
  background-color: rgba(229, 229, 229, 1);
  margin: 13px 0 0 132px;
  color: rgba(42, 130, 228, 1);
  border-radius: 20px;
}

.contents {
  display: flex;
  max-width: 620px;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 30px 0 0 132px;
}

.item {
  margin-bottom: 57px;
}

.but {
  margin-left: 665px;
}
</style>